<template>
  <div id="login">
    <div id="fist">
        <h2>胖虎到家-后台登录</h2>
        
        <el-form :model="Form" :rules="rules" ref="Form" label-width="80px" hide-required-asterisk>
            <el-form-item prop="zhanghao" label="账号">
        <el-input v-model="Form.zhanghao"  style="width: 300px;" placeholder="输入账号吧少爷" prefix-icon="el-icon-user"></el-input>
        
        </el-form-item>
        <el-form-item prop="mima" label="密码">
            <el-input v-model="Form.mima" style="width: 300px;" placeholder="老爷保险密码" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button  type="primary" @click="submitForm('Form')">登录</el-button>
            <el-button @click="resetForm('Form')">取消</el-button>
        </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      Form:{
        zhanghao:'',
        mima:'',
      },
      rules: {
          zhanghao: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 18, message: '密码长度在 3 到 18 个字符', trigger: 'blur' }
          ],
          mima: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 18, message: '密码长度在 3 到 18 个字符', trigger: 'blur' }
          ],
    },
    
    }
  },
  
  methods:{
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            
            this.$http.post('http://43.143.190.87:8182/login?username='+this.Form.zhanghao+'&pwd='+this.Form.mima)
            .then(respond=>{
              if(respond.data.code==1){
                this.$message.success('登录成功');
                this.$router.push('/home')
              }else{
                this.$message.error('登录失败')
                return false;
              } 
            })
            .catch(error=>{
              this.$message.error('服务器废了')
            })
            
          } 
        });
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    }


    
  }
};
</script>

<style>
#login {
  height: 100vh;
  background: url(../assets/login_bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#fist{
  width: 450px;
  height: 260px;
  /* margin: 200px auto; */
  background-color: aliceblue;
  border-radius: 10px;
}
#fist h2{
    text-align: center;
    line-height: 70px;
}
#fist p{
    text-align: center;
    font-size: 12px;
    line-height: 12px;
    color:red;
    margin-top: 0px;
}

</style>